<template>
<div
  ref="echarts"
  :style="`width:${width};height:${height}`"
>
</div>
</template>

<script>
const echarts = require('echarts')
export default {
  name: 'echarts',
  props:{
    width:{
      type:String,
      default:'500px'
    },
    height:{
      type:String,
      default:'400px'
    }
  },
  data(){
    return{
      myChart:null
    }
  },
  mounted() {
    window.addEventListener('resize',this.resize)
  },
  destroyed() {
    window.removeEventListener('resize',this.resize)
  },
  methods:{
    resize(){
      this.myChart.resize()
    },
    echartsInit(option){
      this.myChart = echarts.init(this.$refs.echarts);
      this.myChart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
